<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
        <link rel="stylesheet" href="/static/css/common.css">
        <link rel="stylesheet" href="/static/css/index.css">
        <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
        <title>zigblog主页</title>
    </head>

    <body>
        <!-- 移动端菜单栏 -->
        <div class="mobile-menu">
            <span class="mobile-menu-icon">
                <i class="layui-icon layui-icon-menu-fill"></i>
            </span>
            <div class="mobile-menu-content">
                <p>
                    <a href="/">首页</a>
                </p>
                <p>
                    <a href="/archive">归档</a>
                </p>
                <p>
                    <a href="/about">关于</a>
                </p>
                <p>
                    <a target="_blank" href="https://www.ghxi.com/">资源</a>
                </p>
            </div>
        </div>


        <div class="container">
            <!-- 左侧菜单栏 -->
            <div class="side-bar">
                <!-- logo -->
                <div class="logo-wrapper">
                    <img src="/static/img/logo.png" alt="听雨" onclick="window.location.href='/';" />
                    <h1>听雨</h1>
                </div>
                <!-- 联系方式 -->
                <div class="contact-wrapper">
                    <span class="contact-email">
                        <img src="/static/img/email.svg" alt="1186472484@qq.com" />
                    </span>
                    <span class="contact-gitee">
                        <img src="/static/img/gitee.svg" alt="https://gitee.com/yuguofu/" href="https://gitee.com/yuguofu/"
                            onclick="window.open(this.getAttribute('href'));" />
                    </span>
                </div>
                <!-- 导航链接 -->
                <div class="navlink">
                    <ul class="navlist">
                        <li>
                            <a href="/">首页</a>
                        </li>
                        <li>
                            <a href="/archive">归档</a>
                        </li>
                        <li>
                            <a href="/about">关于</a>
                        </li>
                        <li>
                            <a target="_blank" href="https://www.ghxi.com/">资源</a>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 主内容 -->
            <div class="main-content">
                <div class="content-wrapper">

                    @zig {
                        if (zmpl.get("articles")) |arts| { 
                            for (arts.items(.array)) |art| {
                                const id = art.get("id");
                                const title = art.get("title");
                                const description = art.get("description");
                                const istop = art.get("istop");
                                const cate_name = art.get("cate_name");
                                const created_at = art.get("created_at");

                                var is_top: bool = false;
                                switch (istop.?.*) {
                                    .boolean => |top| is_top = top.value,
                                    else => break,
                                }
                                if (is_top) {
                                    <blockquote class="layui-elem-quote sticky-article">
                                        <div class="sticky-article-title">
                                            <img src="/static/img/top.svg">
                                            <h2>
                                                <a href="/article/{{id}}">{{title}}</a>
                                            </h2>
                                        </div>
                                        <div class="sticky-article-des">
                                            <p>
                                                {{description}}
                                            </p>
                                        </div>
                                        <div class="sticky-article-info">
                                            <span class="info-author">作者：听雨</span>
                                            <span class="info-cate">分类：{{cate_name}}</span>
                                            <span class="info-created">发布时间：{{created_at}}</span>
                                        </div>
                                    </blockquote>
                                    
                                }else{
                                    <div class="article-card">
                                        <h2 class="article-title">
                                            <a href="/article/{{id}}">{{title}}</a>
                                        </h2>
                                        <div class="article-des">
                                            <p>
                                                {{description}}
                                            </p>
                                        </div>
                                        <div class="article-info">
                                            <span>作者：听雨</span>
                                            <span class="info-cate">分类：{{cate_name}}</span>
                                            <span class="info-created">发布时间：{{created_at}}</span>
                                        </div>
                                    </div>
                                }
                            }

                        }
                    }



                    <!-- <div class="load-more">
                        <img src="/static/img/load_more.svg" alt="加载更多">
                    </div> -->

                    <div style="margin: 35px 0;"></div>
                </div>

            </div>

            <!-- 右侧栏 -->
            <div class="side-left">
                <!-- 搜索框 -->
                <div class="layui-input-group search-box">
                    <input id="search-keyword" type="text" class="layui-input" placeholder="输入内容搜索"
                        onkeypress="handleKeyPress(event)">
                    <div id="search-btn" class="layui-input-split layui-input-suffix search-btn" onclick="search()">
                        <i class="layui-icon layui-icon-search"></i>
                    </div>
                </div>

                <!-- 分类 -->
                <div class="layui-card category-box">
                    <div class="layui-card-header">文章分类</div>
                    <div class="layui-card-body">

                        @zig {
                            if (zmpl.get("cates")) |categories| {
                                for (categories.items(.array)) |cate| {
                                    // const id = cate.get("id");
                                    const name = cate.get("name");

                                    <p>
                                        <a href="/article/cate/{{name}}">{{name}}</a>
                                    </p>
                                }
                            }
                        }

                    </div>
                </div>

                <!-- 标签 -->
                <!-- <div class="layui-card tags-box">
                    <div class="layui-card-header">卡片面板</div>
                    <div class="layui-card-body">
                        <p>结合 layui 的栅格系统</p>
                        <p>轻松实现响应式布局</p>
                    </div>
                </div> -->
                
            </div>
        </div>




        <script type="text/javascript">
            // 文章搜索
            function search() {
                let keyword = document.getElementById("search-keyword").value;
                keyword = keyword.trim() || "";
                if (keyword) {
                    window.location.href = `/search?keyword=${keyword}`;
                }
            }

            // 监听搜索框回车键按下
            function handleKeyPress(event) {
                if (event.key == "Enter" || event.keyCode == 13) {
                    search();
                }
            }
        </script>
    </body>

</html>